import React, { PureComponent } from 'react';
import { formatMessage, setLocale, getLocale } from 'umi/locale';
import { Menu, Icon } from 'antd';
import classNames from 'classnames';
import HeaderDropdown from '../HeaderDropdown';
import { connect } from 'dva';
import styles from './styles/index.less';

export default class SelectWallPaper extends PureComponent {

  render () {
    const { className, default_wallpaper, wallpapers, changeWallPaper } = this.props;
    const selected = default_wallpaper;
    const langMenu = (
      <Menu className={styles.menu} selectedKeys={[selected]} onClick={item => changeWallPaper(item)}>
        {wallpapers.map(item => (
          <Menu.Item key={item.id}>
            {item.value}
          </Menu.Item>
        ))}
      </Menu>
    );
    return (
      <HeaderDropdown overlay={langMenu} placement="bottomRight">
        <span className={classNames(styles.dropDown, className)}>
          <Icon type="picture" title={formatMessage({ id: 'navBar.wallpaper' })} />
        </span>
      </HeaderDropdown>
    );
  }
}

